<template>
	<view class="container">
		<uni-section title="菜品名称" subTitle="菜品名称" type="line" class="search">
			<uni-search-bar placeholder="菜品名称" v-model="filter.goodsName" @confirm="reloadPage"  @cancel="cancelSearch"/>
		</uni-section>
		
		<view class="menu">
			<scroll-view class="box" scroll-y="true">
				<template v-for="(item, index) in classOptions">
					<view class="item" :class="{ active: item.id==filter.goodsClassId }"
						@click="classClick(item.id,index)">{{item.goodsClassName}}</view>
				</template>
				<view style="height:80px;"></view>
			</scroll-view>
		</view>
		<view style="height:100%;">
        <view class="goods-list">
            <view class="goods" v-for="item in page.records" @click="">
                <view class="img" @click="showSpec(item.id)">
                    <image mode="aspectFill" width="100%" height="100%"
                        :src="item.thumbnail+'?x-oss-process=image/resize,w_200,h_200,m_fill'"></image>
                </view>
                <view class="title">
                    <text :selectable="true" :user-select="true">{{ item.goodsName }}</text>
                </view>
            </view>
        </view>
		</view>
		
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="toShoppingCart"
				@buttonClick="toOrder" />
		</view>
		
		<SelSpec ref="selSpec" @refresh="countShoppingCart"></SelSpec>
		
	</view>
</template>

<script>
	import { GoodsApi } from '@/api/food/GoodsApi'
	import { ClassApi } from '@/api/food/ClassApi'
	import SelSpec from "./SelSpec";
	import { ShoppingCartApi } from '@/api/food/ShoppingCartApi'
	import { OrderApi } from '@/api/food/OrderApi'

	export default {
		components: {
			SelSpec
		},
		data() {
			return {
				Config: this.$Config,
				Common: this.$Common,
				Auth: this.$Auth,
				ShareUtil: this.$ShareUtil,
				State: this.$store.state,
				Dict: this.$Dict,

				page: {
					total: 0,
					size: 20,
					current: 1,
					pages: 2,
					records: []
				},

                //最终筛选条件
                filter:{
					goodsClassId: '',
					goodsName: '',
                },

                //品牌筛选参数
				classOptions: [],

				status: 'more',
				
				options: [{
					icon: 'cart',
					text: '已点菜品',
					info: 0
				}],
				buttonGroup: [
					{
						text: '下单',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
			}
		},
		onShow() {
			this.countShoppingCart()
		},
		onLoad(e) {
            let that = this
			
			
            			
			this.getClassOption()
            this.getGoodsMainPage()
			this.countShoppingCart()
		},
        onPullDownRefresh() {
            this.reloadPage()
        },
        onReachBottom() {
            if (this.page.current != this.page.pages) {
                this.page.current++
                this.getGoodsMainPage()
            }
        },
		methods: {
			showSpec(mainGoodsId){
				this.$refs['selSpec'].show(mainGoodsId)
				
			},
			getClassOption() {
				let arr = [{
					"id": "",
					"goodsClassName": "全部"
				}];
			    ClassApi.getGoodsClassList(0).then((response) => {
					this.classOptions = arr.concat(response)
			    })
			},
			classClick(id) {
				this.filter.goodsClassId = id
				this.reloadPage()
			},
			
            reloadPage(){
                this.page.current = 1
                this.page.pages = 2
                this.getGoodsMainPage()
            },
            getGoodsMainPage() {
				let that = this
				if (that.page.current > that.page.pages) {
					return false
				}

				let param = this.Common.deepClone(that.filter)
                param['pageIndex'] = this.page.current
                param['pageSize'] = this.page.size

				that.status = 'loading'
				GoodsApi.getGoodsMainPage(param).then((response) => {
					if (that.page.current == 1) {
						that.page = response
					} else {
						that.page.records = that.page.records.concat(response.records)
					}

					if (that.page.current == that.page.pages || that.page.pages == 0) {
						that.status = 'noMore'
					} else {
						that.status = 'more'
					}

					that.triggered = false;

				})
			},
			cancelSearch(){
				this.filter.goodsName = ""
				this.reloadPage()
			},
			
			
			toShoppingCart(e) {
			    this.Common.toUrl('/pages/food/ShoppingCartList',true)
			},

			toOrder() {
				let that = this
				
				uni.showModal({
					title: '提示',
					content: '确定点餐吗？',
					success: function (res) {
						if (res.confirm) {
							if(!that.options[0].info || that.options[0].length == 0){
								uni.showToast({
									title: '请选择菜品',
									icon: 'none'
								});
												
								return false
							}
							
							let data = {
								remark:""
							}
							OrderApi.createOrder(data).then((response) => {
								uni.showToast({
									title: '点餐成功',
									icon: 'success'
								});
								that.countShoppingCart()
							})
						}
					}
				});
				
			},
			countShoppingCart() {
				ShoppingCartApi.countShoppingCart({}).then((response) => {
					this.options[0].info = response
				})
			},

		}
	}
</script>

<style lang="scss">
page{background-color: #FFF;}

.search{ position: fixed; left:0px; width:100%;
	z-index: 99; background:#FFF;
// #ifdef H5
top:44px;
// #endif

// #ifdef APP-PLUS
top:0px;
// #endif
}

	.menu {
		width: 154rpx;
		height:100%;
		position: fixed;
		left:0px;
		top:0px;
		// #ifdef H5
		padding-top:100px;
		// #endif
		// #ifdef APP-PLUS
		padding-top:56px;
		// #endif
	}

.menu .box {
	white-space: nowrap;
	height: 100%;
	background-color: #F7F8FA;
}

.menu .box .item {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
}

.menu .box .active {
	background-color: #FFF;
	border-left: 4px solid $uni-global-color;
}

.goods-list {
    display: grid;
	grid-template-columns:1fr 1fr;
	grid-gap:40rpx; padding:40rpx;
	margin-left: 154rpx;
	// #ifdef H5
	margin-top:56px;
	// #endif
	// #ifdef APP-PLUS
	margin-top:56px;
	// #endif
	
}

.goods-list .goods {
	display:grid;justify-content:center; align-content:center;
	padding-bottom:20px;
}

.goods-list .goods .img {
    width: 160rpx;
    height: 160rpx;
}

.goods-list .goods .img image {
    width: 100%;
    height: 100%;
	border-radius:10px;
}

.goods-list .goods .title {
	text-align:center;
    margin-top: 20rpx;
    font-size: 36rpx;

}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>
